<template>
  <div>
    <a-tabs v-model:activeKey="activeKey" size="small" :tabBarStyle="{ margin: 0 }">
      <a-tab-pane key="1" tab="接口代码/类型">
      </a-tab-pane>
      <a-tab-pane key="2" tab="相关JSON"></a-tab-pane>
      <a-tab-pane key="3" tab="Element-Plus"></a-tab-pane>
      <a-tab-pane key="4" tab="描述"></a-tab-pane>
    </a-tabs>
  </div>
  <div class="code-content">
    <pre v-if="activeKey === '1'">
      <div v-html="code.html"></div>
    </pre>
    <pre v-if="activeKey === '2'">
      <div v-html="code.jsonc"></div>
    </pre>
    <pre v-if="activeKey === '3'">
      <div v-html="plus.createTableCode(code.jsonData?.resp)"></div>
      <div v-html="plus.createRulesCode(code.jsonData?.query)"></div>
      <div v-html="plus.createRulesCode(code.jsonData?.body)"></div>
    </pre>
    <!-- 返回参数 -->
    <div class="method" v-if="activeKey === '4'">
      <div class="parameters">
        <div class="param-line">
          <span>接口描述：</span>
          <span>{{ methodObj.summary }}</span>
        </div>
        <hr>
        <div class="parameters-title">请求参数</div>
        <div class="param-line">
          <span style="width:30%">名称</span>
          <span>描述</span>
        </div>
        <hr />
        <div v-for="(param, index) in  methodObj.parameters" :key="index">
          <div class="param-line">
            <!-- param.required 必填标记 param.in 参数体所在位置-->
            <span :class="{ required: param.required }" style="width:30%">
              <span style="font-weight: normal;">[{{ param.in }}]</span>
              {{ param.name }} <span class="param-type">{{ param.type && `(${param.type})` }}</span></span>
            <span style="width:70%">
              {{ param.description }}
              <div v-if="param.schema && param.schema.originalRef && definitions[param.schema.originalRef]">
                <div>类型：{{ definitions[param.schema.originalRef].type }}</div>
                <div>
                  参数示例：
                </div>
                <RefTable :properties="definitions[param.schema.originalRef].properties" :definitions="definitions" />
              </div>
            </span>
          </div>
        </div>
      </div>
      <!-- 响应 -->
      <div class="response">
        <div class="parameters-title">响应参数</div>
        <div v-for="(response, code) in  methodObj.responses" :key="code">
          <div class="param-line">
            <span style="width:30%">{{ code }}</span>
            <span style="width:70%">
              {{ response.description }}
              <div>
                参数示例:
              </div>
              <RefTable :response="response" :definitions="definitions" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { activeCode } from "@/settings/local";
import { computed, defineComponent, unref, ref, watch } from 'vue';
import RefTable from "./RefTable.vue";
import hljs from "highlight.js/lib/common";
import "highlight.js/styles/vs.css";
import { getCode, getJson, getJsonData } from '../hooks/useGenCode';
import * as plus from "../hooks/element-plus-templ"
export default defineComponent({
  components: {
    RefTable
  },
  props: {
    requireParams: {
      type: Array,
      default: () => [],
    },
    response: {
      type: Array,
      default: () => [],
    },
    requireMethod: {
      type: String,
      default: "GET",
    },
    url: {
      type: String,
      default: "",
    },
    summary: {
      type: String,
      default: "",
    },
    methodObj:{
      type: Object,
      default: {},
    },
    definitions: {
      default: () => ({}),
      type: Object,
    },
    gtitle: String
  },
  setup(props) {
    const activeKey = ref("1")
    watch(() => props.gtitle, () => activeKey.value = "1") // 更换对象重置为第一项

    const code = computed(() => {
      const content = unref(activeCode) || "";
      if (!props.url) {
        return {
          html: hljs.highlightAuto("no code ..", ["typescript"]).value,
          text: "",
        };
      }
      const codeOption = {
        url: props.url,
        method: props.requireMethod,
        summary: props.summary,
        params: props.requireParams,
        response: props.response
      };

      const code = getCode(codeOption, content);
      const jsonc = getJson(codeOption, content);
      const jsonData = getJsonData(codeOption, content);

      return {
        html: hljs.highlightAuto(code as string, ["typescript"]).value,
        jsonc: hljs.highlightAuto(jsonc as string, ["typescript"]).value,
        text: code,
        jsonData,
      };
    });

    return {
      code,
      activeKey,
      plus,
    };
  },
});
</script>
<style lang="less" scoped>
pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.code-content {
  max-height: 60vh;
  overflow-y: auto;
  padding:0 5px;
}

.parameters,
.response {
  border: 1px solid #89bf04;
  border-top-width: 0;
  padding: 15px;

  .parameters-title {
    font-size: 18px;
  }

  .param-line {
    display: flex;
    justify-content: flex-start;
    font-weight: 700;
    color: #3b4151;
    margin-top: 5px;

    .required::after {
      content: " * required ";
      color: #ff0000;
      font-weight: 600;
    }

    .param-type {
      font-weight: 500;
    }
  }
}
.response {
  .param-line {
    display: block;

    >span:first-child {
      color: red;
    }
  }
}
.method-line {
  position: relative;

  .right-operation {
    position: absolute;
    right: 10px;

    .anticon {
      cursor: pointer;
    }
  }
}
</style>